var c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    path = '../../images/img_1.jpg',
    img = document.createElement('img');

img.src = path;
img.onload = function() {
    c.width = img.width;
    c.height = img.height;

    ctx.fillStyle = '#ddd';
    ctx.fillRect(0, 0, c.width, c.height);

    /**
     * ctx.drawImage(img, dx, dy); //从左上角按原始尺寸绘制
     * ctx.drawImage(img, dx, dy, dw, dh); //dx、dy确定起绘点位置，dw/dy控制缩放尺寸
     * ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); //最多可有9参
     * 以d开头的参数，用于在目标canvas上，找出绘制区域。
     * 以s开头的参数，用于在原图像上规定要绘制的区域
     * 这里的img对象 还可以是 canvas 或者 video
     */ 
    ctx.drawImage(img, 135, 50, 100, 100, 100, 100, 200, 200);
}
document.body.appendChild(img);